import { Form, FormInstance, Input, Modal } from 'antd';
import type { ReactNode,FC } from 'react';
import { memo } from 'react';

interface IProps {
  children?: ReactNode;
  open: boolean;
  onCancel: () => void;
  onOk: () => void;
  title: string;
  form: FormInstance;
  setOpen: (open: boolean) => void;
};

const ModalEdit: FC<IProps> = memo(({open,onOk,title,form,setOpen}) => {
  return (
    <div>
      <Modal
        title={title}
        centered
        open={open}
        onOk={onOk}
        onCancel={() => {
          form.resetFields();
          setOpen(false);
        }}
      >
        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input disabled={title === "编辑用户"} />
          </Form.Item>
          {title !== "编辑用户" && (
            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: "请输入密码" }]}
            >
              <Input />
            </Form.Item>
          )}
          <Form.Item
            label="邮箱"
            name="email"
            rules={[{ required: true, message: "请输入邮箱" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="手机号"
            name="mobile"
            rules={[{ required: true, message: "请输入手机号" }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );    
});

export default ModalEdit;